<template>
  <div v-if="forbidDay && time != {}" class="gap">
    <el-date-picker
      v-model="time.date"
      type="date"
      style="width: 150px"
      placeholder="选择日期"
      :picker-options="pickerOptions"
      @change="updateOptions"
    >
    </el-date-picker>
    <el-time-select
      placeholder="起始时间"
      v-model="time.startTime"
      style="width: 120px"
      :picker-options="startTimeOptions"
      @change="resolveStartTime"
    >
    </el-time-select>
    <el-time-select
      placeholder="结束时间"
      v-model="time.endTime"
      style="width: 120px"
      :picker-options="endTimeOptions"
      @change="resolveEndTime"
    >
    </el-time-select>
  </div>
</template>

<script>
export default {
  props: {
    open_time: {
      type: Array,
      default() {
        return [];
      },
    },
    timer: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      time: this.timer,
      forbidDay: null,
      startTimeOptions: {},
      endTimeOptions: {},
      startHour: "",
      endHour: "",
      pickerOptions: {
        //预约往后一周内的时间
        disabledDate: (time) => {
          //获取当前时间
          let curDate = new Date().getTime();
          //一周的时间
          let seven = 3 * 24 * 3600 * 1000;

          //一周后结点
          let sevenDay = new Date(curDate + seven);

          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() > sevenDay ||
            this.forbidDay.every((v) => v != time.getDay())
          );
        },
      },
    };
  },
  created() {
    console.log("created", this.time);
    this.forbidDay = this.formateForbidDay();
    this.updateOptions();
  },
  methods: {
    updateOptions() {
      console.log("updateOptions", this.time, "!", this.timer);
      this.updateHours();
      if (
        new Date(this.time.date).toDateString() == new Date().toDateString()
      ) {
        this.endTimeOptions = {
          start: this.endHour,
          step: "00:30",
          end: "22:00",
        };
        this.startTimeOptions = {
          start: this.startHour,
          step: "00:30",
          end: "21:30",
        };
      } else {
        this.endTimeOptions = {
          start: "09:30",
          step: "00:30",
          end: "22:00",
        };
        this.startTimeOptions = {
          start: "09:00",
          step: "00:30",
          end: "21:30",
        };
      }
      console.log(
        this.time.date,
        this.time.startTime,
        this.time.endTime,
        "updateOptions"
      );
      this.emit();
    },
    resolveStartTime(val) {
      if (!this.time.endTime || !this.time.startTime) return;
      let startHour = val.slice(0, 2),
        startMinutes = val.slice(3, 5),
        endHour = this.time.endTime.slice(0, 2),
        endMinutes = this.time.endTime.slice(3, 5);
      if (
        startHour > endHour ||
        (startHour == endHour &&
          (startMinutes == endMinutes || startMinutes > endMinutes))
      ) {
        this.time.endTime = "";
      }
      console.log(
        this.time.date,
        this.time.startTime,
        this.time.endTime,
        "resolveStartTime"
      );
      this.emit();
    },
    resolveEndTime(val) {
      if (!this.time.endTime || !this.time.startTime) return;
      let endHour = parseInt(val.slice(0, 2)),
        endMinutes = parseInt(val.slice(3, 5)),
        startHour = parseInt(this.time.startTime.slice(0, 2)),
        startMinutes = parseInt(this.time.startTime.slice(3, 5));
      if (
        startHour > endHour ||
        (startHour == endHour &&
          (startMinutes == endMinutes || startMinutes > endMinutes))
      ) {
        this.time.startTime = "";
      }
      console.log(
        this.time.date,
        this.time.startTime,
        this.time.endTime,
        "resolveEndTime"
      );
      this.emit();
    },
    updateHours() {
      let time = new Date(Date.now());
      let hour = time.getHours(),
        minutes = time.getMinutes();
      if (hour >= 9 && hour <= 21) {
        if (minutes < 30) {
          this.startHour = `${hour == 9 ? "09" : hour}:30`;
          this.endHour = `${hour + 1}:00`;
        } else {
          this.startHour = `${hour + 1}:00`;
          this.endHour = `${hour + 1}:30`;
        }
      }
    },
    emit() {
      if (this.time.date && this.time.startTime && this.time.endTime) {
        console.log("emit");
        this.$emit("updateState", this.time);
      }
    },
    formateForbidDay() {
      let forbidDays = this.open_time;
      let arr = [];
      forbidDays.forEach((v) => {
        switch (v) {
          case "周一":
            arr.push(1);
            break;
          case "周二":
            arr.push(2);
            break;
          case "周三":
            arr.push(3);
            break;
          case "周四":
            arr.push(4);
            break;
          case "周五":
            arr.push(5);
            break;
          case "周六":
            arr.push(6);
            break;
          case "周日":
            arr.push(0);
            break;
          default:
            return;
        }
      });
      console.log("arr", arr);
      return arr;
    },
    
  },
};
</script>

<style scoped>
.gap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>
